<template>
	<view class="content">
		<view class="component-box">
			<!-- 选择 -->
			<view class="item" v-for="(item, index) in tabMenu" :key="index" @tap="activeTab(index)">
				<view class="item-title" :class="[tabSwitch == index ? 'active-item-title' : '']">{{item}}</view>
				<i class="iconfont iconjiantou icon-styl" :class="[tabSwitch == index ? 'active-icon-styl' : '']"></i>
			</view>
			
			<view class='pop-bg' v-if="con1Switch" @tap.stop="closeAll" @touchmove.stop.prevent='moveHandle'>
				<!-- 日期 -->
				<view class="bwpicke" style="background-color:white;border-top: 1px solid #D8D8D8;">
					<picker-view class="pickcss" v-if="visible" :indicator-class="picview" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
						<picker-view-column>
							<view class="item" style="border-right:0upx ;width: 140upx;" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column class="columcss">
							<view class="item" style="border-right:0upx;width: 140upx;" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btnchak" @click="qdchak()">
					<text class="qdbt">确定</text>
				</view>
			</view>
			
			<!-- 支出 -->
			<view class='pop-bg' v-if="con2Switch" @tap.stop="closeAll" @touchmove.stop.prevent='moveHandle'>
				<view style="border-bottom: 1upx solid #D8D8D8;" class="bg-con1" v-for="(item, index) in arrBgCon2" :key="index" @tap="con2ChangeOpt(item, index)">
					<view class="opi-sty3" :class="[con2Current == index ? 'active-opi-sty3' : '']">{{item.title}}</view>
					<i class="iconfont gougou-styl" :class="[con2Current == index ? 'iconduigou' : '']"></i>
				</view>
			</view>
		</view>
		
		<view class="detailed">
			<view class="detailed-z">
				<view class="detailed-left">
					<text>{{myYear}}年{{myMonth}}月</text>
				</view>
				<view class="detailed-right">
					<view>支出{{expenditure_num}}</view>
					<view>收入{{income_num}}</view>
				</view>	
			</view>	
		</view>
		<view class="studyNone" v-if="studyList.length == 0">本月暂无明细</view>
	    <view class="examine" v-else>
			<view class="examine-z" v-for="(item,index) in studyList" :key="index">
				<view class="billname">
					<view v-if="(item.cion_type == 1 && item.cion_datail_data.sign_type == 1) || item.cion_type == 2 || item.cion_type == 3 || item.cion_type == 7">{{item.cion_type_str}}</view>
					<view v-else-if="item.cion_type == 1 && item.cion_datail_data.sign_type == 2">{{item.cion_type_str}}(连续七天签到)</view>
					<view v-else-if="item.cion_type == 4 || item.cion_type == 5">
						{{item.cion_type_str}}({{item.cion_datail_data.subject_name}}{{item.cion_datail_data.section_name}})
					</view>
					<view v-else-if="item.cion_type == 6 ">
						{{item.cion_type_str}}({{item.cion_datail_data.ename}})
					</view>
					<view v-else>未知</view>
					<text class="money green" v-if="item.budget_type == 1">+{{item.cion}}</text>
					<text class="money" v-if="item.budget_type == 2">-{{item.cion}}</text>
				</view>
				<text class="times">{{item.time}}</text>
			</view>
		</view>	
		<view><uni-load-more v-if="studyList.length>7" :status="status" :content-text="contentText" /></view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import cDate from '@/common/util.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1

			for (let i = 1990; i <= date.getFullYear(); i++) {
			    years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
			    months.push(i)
			}

			return {
				tabMenu: ['选择时间', '收支选择'],
				con1Switch: false,
				arrBgCon2: [{title: '全部',budgetType: ''}, {title: '支出',budgetType: 2}, {title: '收入',budgetType:1}],
				con2Current: 0,
				initTabTitleCon2: '',
				con2Switch:false,
				tabSwitch: 999,
				title: 'picker-view',
				years,
				year,
				months,
				month,
				value: [9999, month - 1],
				// /**
				//  * 解决动态设置indicator-style不生效的问题
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				picview:"pickes",
				studyList: [],
				expenditure_num: 0,
				income_num: 0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				status: 'more',
				page: 1,
				reload: true,
				budgetType: '',
				startTime: '',
				endTime: '',
				myYear: '',
				myMonth: '',
				value1: []
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: 'rule'
			})
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getStudy();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getStudy();
			}, 500);
		},
		components:{
			uniLoadMore
		},
		onLoad() {
			this.getStudy();
		},
		methods: {
			/* 学情分列表 */
			getStudy() {
				/* 筛选开始时间与结束时间 */
				var start = Date.UTC(this.year, this.month-1, 1, -8, 0, 0) / 1000;
				var end = Date.UTC(this.year, this.month, 1, -8, 0, 0) / 1000;
				this.startTime = start;
				if(this.month == 12) {
					this.endTime = parseInt(this.startTime+2678399)
				} else {
					this.endTime = parseInt(end-1)
				}
				/* 当前搜索月份显示 */
				var tstamp = new Date(this.startTime * 1000);
				this.myYear = tstamp.getFullYear(tstamp);
				this.myMonth = tstamp.getMonth(tstamp) + 1;
				var data = {
					page: this.page,
					pagesize: 8,
					startTtime: this.startTime,
					endingTime: this.endTime
				}
				if(this.budgetType != '') {
					data.budgetType = this.budgetType
				}
				this.$zapi.apiPost('user/Cion.Users/CionList',data).then(res => {
					if(res.data.code == 200) {
						var studyList = res.data.data.data;
						for(var i = 0; i < studyList.length; i++) {
							studyList[i].cion_type_str = this.getType(studyList[i].cion_type);
							if(studyList[i].cion == null) {
								studyList[i].cion = 0;
							}
							studyList[i].time = cDate.getAllTime(studyList[i].creat_time);
						}
						this.income_num = res.data.data.income_num;
						this.expenditure_num = res.data.data.expenditure_num;
						this.studyList = this.reload ? studyList : this.studyList.concat(studyList);
						this.reload = false;
						this.status='more';
					} else {
						if(this.reload){
							this.studyList = [];
							this.income_num = 0;
							this.expenditure_num = 0;
						}else{
							this.status='noMore';	
						}
					}
				})
			},
			/* 根据返回值判断类型 */
			getType(cion_type) {
				cion_type = Number(cion_type);
				switch (cion_type) {
					case 1:
						return '签到';
						break;
					case 2:
						return '充值';
						break;
					case 3:
						return '提现';
						break;
					case 4:
						return '趣练';
						break;
					case 5:
						return '同步';
						break;
					case 6:
						return '自评';
						break;
					case 7:
						return '智测';
						break;
					default:
						'未知类型';
						break;
				}
			},
			bindChange (e) {
			    const val = e.detail.value
				this.value1 = val;
			    this.year = this.years[val[0]]
			    this.month = this.months[val[1]]
			},
			qdchak(){
				this.con1Switch = false;
				this.con2Switch = false;
				this.tabSwitch = 999;
				this.page = 1;
				this.reload = true;
				this.value = this.value1;
				this.getStudy();
			},
			con2ChangeOpt(item, index) {
				this.con2Current = index
				this.budgetType = item.budgetType;
				this.page = 1;
				this.reload = true;
				this.getStudy();
			},
			activeTab(index) {
				if(this.tabSwitch == 999) {
					this.tabSwitch = index
					if (index == 0) { this.con1Switch = true }
					if (index == 1) { this.con2Switch = true }
					return
				}
				this.closeAll()
			},
			closeAll() {
				this.con1Switch = false
				this.con2Switch = false
				this.tabSwitch = 999
			}
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
	.pickes{
		/* background: #000000; */
		border-bottom: 0 !important;
		border-top: 0 !important;
	}
	.component-box {
		display: flex;
		align-items: center;
		width: 750upx;
		height: 93upx;
		border-bottom: 1px solid #E5E5E5;
		background: #FFFFFF;
		position: fixed;
	}
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 38upx;
		border-right: 1px solid #E5E5E5;
	}
	.item-title {
		color: #333333;
		font-size: 36upx;
		transition: all .3s;
	}
	.active-item-title {
		color: #FF9900;
	}
	.item:last-child{
		border: none;
	}
	.icon-styl {
		font-size: 48upx;
		color: #0D0408;
		transform: rotate(90deg);
		transition: all .3s;
	}
	.active-icon-styl {
		color: #FF9900;
		transform: rotate(-90deg);
	}
	
	.pop-bg {
		position: fixed;
		width: 100%;
		height: calc(100% - 93upx);
		top: 93upx;
		background-color: rgba(0, 0, 0, 0.3);
		transition: opacity 5s;
	}
	.bg-con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
		padding-left: 30upx;
		padding-right: 30upx;
		background-color: #ffffff;
		text-align: center;
	}
	.btnchak{
		width: 100%;
		height: 100upx;
		text-align: center;
		background-color: white;
		border-top: 1px solid #D8D8D8;
	}
	.qdbt{
		width: 100%;
		font-size: 34upx;
		line-height: 105upx;
		color: #FF9900;
	}
	.bg-con1:first-child {
		border-top: 1px solid #E5E5E5;
	}
	.opi-sty3 {
		color: #0D0408;
		font-size: 32upx;
		text-align: center;
	}
	.active-opi-sty3 {
		color:#FF9900;
	}
	
	.gougou-styl {
		color: #FF9900;
		font-size: 45upx;
	}
	
	.detailed{
		height: 130upx;
	}
	.detailed-z{
		height: 130upx;
		padding: 100upx 30upx 0;
		margin: auto;
	}
	.detailed-left{
		height: 130upx;
		line-height: 130upx;
		font-size: 36upx;
		color: #999999;
	}
    .detailed-right{
		margin-top: -110upx;
		margin-right: 10upx;
		float: right;
		height: 80upx;
		font-size: 28upx;
		color: #999999;
	}
	.studyNone{
		color: #999999;
		font-size: 36upx;
		text-align: center;
		margin-top: 200upx;
	}
	.examine{
		border-bottom: #999999;
		/* margin-bottom: 80upx; */
		padding-top: 120upx;
	}
	.examine-z{
		width: 690upx;
		border-bottom: #999999;
		border-bottom: 1px solid #E5E5E5;
		background: #FFFFFF;
		padding: 0 30upx;
	}
	.examine-z:last-child{
		border: none;
	}
	.billname{
		margin-bottom: 10upx;
		padding-top: 20upx;
		display: flex;
		justify-content: space-between;
	}
	.billname view{
		width: 500upx;
		font-size: 34upx;
		color: #333333;
	}
	.money{
		font-size: 32upx;
		color: #666666;
	}
	.green{
		color: #FF9900;
	}
	.times{
		color: #999999;
		font-size: 28upx;
	}
	.pickcss{
		width: 300upx;
		height: 300upx;
		background-color: white;
		margin: auto;
		/* padding: 10upx 0upx; */
	}
	.pickes:before{
		border-top: 1px solid #FF9900 !important;
		width: 110upx;
		margin: auto;
		padding-right:10upx;
		
	}
	.pickes:after{
		border-bottom: 1px solid #FF9900 !important;
		width: 110upx;
		margin: auto;
		padding-right:10upx;

	}
	
</style>
